<template>
  <Spin fix class="loading-container" v-if="loading">
    <Icon type="ios-loading" size="36" class="spin-icon-load"></Icon>
    <div>加载中...</div>
  </Spin>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang="less">
.ivu-spin-fix.loading-container {
  z-index: 10;
  bottom: 0;

  .ivu-spin-main {
    position: fixed;
  }

  .spin-icon-load {
    animation: ani-spin 1s linear infinite;
  }

  @keyframes ani-spin {
    from {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}
</style>
